<template>
  <div class="report-template">
   <div class="report-cont" :style="{height: viewHeight + 'px'}">
     <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="参数名称:">
          <el-input v-model="formInline.characteristicName" placeholder="请输入参数名称"></el-input>
        </el-form-item>
        <el-form-item label="参数编号:">
          <el-input v-model="formInline.characteristicCode" placeholder="请输入参数编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="filterListByKey" icon="el-icon-search">搜索</el-button>
          <el-button  @click="clearFilterKey" icon="el-icon-delete">清空</el-button>
        </el-form-item>
      </el-form>
     </div>
     <div class="report-header">
       <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAddTemplate">新增</el-button>
     </div>
     <div class="report-table">
       <el-table
       border
       size="small"
       :data="tableData"
       :style="{height: tableHeight + 'px','overflow': 'auto'}">
       <el-table-column
         label="#"
         type="index"
         width="50">
       </el-table-column>
       <el-table-column
         prop="characteristicName"
         label="参数名称">
       </el-table-column>
       <el-table-column
         prop="characteristicCode"
         label="参数编号">
       </el-table-column>
       <el-table-column
         prop="unit"
         label="参数单位">
       </el-table-column>
       <el-table-column
         width="220"
         label="操作">
         <template slot-scope="scope">
           <span @click="handleView(scope.row)" class="oper">
             <i class="el-icon-view"></i>
             <span class="oper-label">查看</span>
           </span>
           <span @click="handleEdit(scope.row)" class="oper">
             <i class="el-icon-edit"></i>
             <span class="oper-label">编辑</span>
           </span>
           <span @click="handleDelete(scope.row)" class="oper">
             <i class="el-icon-delete"></i>
             <span class="oper-label">删除</span>
           </span>
         </template>
       </el-table-column>
     </el-table>
     </div>
     <div class="report-bottom">
         <el-pagination
           background
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage"
           :page-sizes="[10, 20, 30, 40, 50, 100]"
           :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
       </el-pagination>
     </div>
   </div>
   <!-- 新增/编辑-->
   <addFeatureTemplate ref="addFeatureTemplate"  :title="title" :currentId="currentId" @getCharacteristicPool="getCharacteristicPool"></addFeatureTemplate>
   <!-- 查看-->
   <featureTemplate ref="featureTemplate"  :currentId="currentId"></featureTemplate>
  </div>
</template>
<script>
import { getList, remove } from "@/api/system/featurePool";
// import { mapGetters } from "vuex"
import featureTemplate from '../../../src/views/system/featurePoolComponents/featureTemplate.vue'
import addFeatureTemplate from '../../../src/views/system/featurePoolComponents/addFeatureTemplate.vue'
export default {
 data() {
   return {
     viewHeight: document.body.clientHeight - 125,
     tableHeight: document.body.clientHeight - 300,
     tableData: [],
     currentPage: 1,
     total: 0,
     pageSize: 10,
     title: '',
     currentId: '',
     formInline: {
      characteristicCode: '',
      characteristicName: ''
     }
   }
 },
 components: {featureTemplate, addFeatureTemplate},
 created() {
   this.getCharacteristicPool()
 },
 mounted() {
     window.onresize = () => {
       this.viewHeight = document.body.clientHeight - 125
       this.tableHeight = document.body.clientHeight - 300
     }
 },
 methods: {
   // 分页
   handleSizeChange (val) {
     this.pageSize = val
     this.page = 1
     this.getCharacteristicPool()
   },
   // 当前页
   handleCurrentChange (val) {
     this.currentPage = val
     this.getCharacteristicPool()
   },
   // 获取列表数据
   getCharacteristicPool () {
     let params = {
      characteristicCode: this.formInline.characteristicCode,
      characteristicName: this.formInline.characteristicName
     }
     getList(this.currentPage, this.pageSize, params)
     .then(res => {
       this.tableData = res.data.data.records
       this.total = res.data.data.total
     })
   },
   // 新建
   handleAddTemplate () {
     this.title = '新增参数'
     this.currentId = ''
     this.$refs.addFeatureTemplate.dialogFormVisible = true
   },
   // 编辑
   handleEdit (row) {
     this.title = '编辑参数'
     this.currentId = row.id
     this.$refs.addFeatureTemplate.dialogFormVisible = true
   },
   // 删除
   handleDelete (row) {
     this.$confirm('确定将选择数据删除??', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         remove(row.id)
           .then(() => {
             this.$message.success('删除成功')
             this.currentPage = 1
             this.getCharacteristicPool()
           })
       })
   },
   // 查看
   handleView (row) {
     this.currentId = row.id
     this.$refs.featureTemplate.dialogFormVisible = true
   },
   // 搜索
   filterListByKey () {
    this.currentPage = 1
    this.getCharacteristicPool()
   },
   // 清空
   clearFilterKey() {
    this.formInline = {
      characteristicCode: '',
      characteristicName: ''
    }
    this.filterListByKey()
   }
 }
};
</script>
 
<style scoped>
.report-template {
 width: 100%;
 height: 100%;
 overflow: hidden;
}
.report-cont {
 padding: 20px;
 background: #ffffff;
 border-radius: 5px;
 width: 100%;
 box-sizing: border-box;
 position: relative;
}
.report-table {
 margin-top: 12px;
}
.report-bottom {
 position: absolute;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 40px;
 line-height: 40px;
 text-align: right;
 padding-right: 16px;
}
.oper {
 display: inline-block;
 width: 50px;
 height: 20px;
 color: #409EFF;
 margin-right: 10px;
 cursor: pointer;
}
.oper-label {
 display: inline-block;
 padding-left: 5px;
}
</style>
 